<template>
  <div class="my-order">
    <div class="search-head">
      <form action="/">
        <van-search v-model="value" @search="onSearch">
          <template #left>
            <van-icon name="arrow-left" @click="onCancel" />
          </template>
        </van-search>
      </form>
    </div>
    <div class="my-order-tab-second">
      <div class="order-card" v-for="(value, index) in goodsItems" :key="index">
        <div class="order-box">
          <div class="order-box-header">
            <div class="order-box-header-state">{{value.order_status}}</div>
            <div class="order-box-remove">
              <img src="../../views/Me/img/delete.png" @click="remove(value.order_nu)">
            </div>
          </div>
          <div class="order-box-item">
            <div class="order-content">
              <div class="order-cover">
                <img :src="'http://127.0.0.1:8089/static' + getOdGdsInfo(value.order_nu)[0].goods_cover_img">
              </div>
              <div class="content">
                {{getOdGdsInfo(value.order_nu)[0].goods_name + getOdGdsInfo(value.order_nu)[0].goods_intro}}
              </div>
              <div class="order-num">x{{getOdItem(value.order_nu)[0].goods_count}}</div>
            </div>
          </div>
          <div class="order-total-bar">
            <div class="order-payment">
              实付
              <span class="price">￥{{getOdToPri(value.order_nu)}}</span>
            </div>
          </div>
          <van-divider :style="{ borderColor: '#e5e5e5', padding: '0 5px', margin: '4px 0'}">
          </van-divider>
          <div class="order-button">
            <div class="od-btn-white od-btn" v-if="getOdSTA(value.order_nu) === '已完成'">追加评价</div>
            <div class="od-btn-white od-btn" v-if="getOdSTA(value.order_nu) === '未完成'">看相似</div>
            <div class="od-btn-red od-btn" v-if="getOdSTA(value.order_nu) === '未支付'">去支付</div>
            <div class="od-btn-red od-btn" v-if="getOdSTA(value.order_nu) === '已完成' || value.pay_status === '已支付'"
              @click="buyAgain(value.order_nu)">再次购买</div>
          </div>
        </div>
      </div>
    </div>
    <div class="my-order-tab" v-if="this.goodsItems.length === 0">
      <ul>
        <li><img src="../../views/Me/img/Myorder.png" alt=""></li>
        <li>您暂时没有相关订单</li>
      </ul>
    </div>
  </div>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  import axios from 'axios'
  export default {
    data() {
      return {
        value: '',
        goodsItems: [],
        flag: 0,
        historySearch: []
      }
    },
    methods: {
      ...mapMutations(['SET_GOODS_ITEM']),
      async getSearchList() {
        const res = await axios.get(axios.defaults.baseURI + 'books/mallorder/?search=' + this.value)
        console.log('res:', res)
        if (res.data.length === 0) {
          const res1 = await axios.get(axios.defaults.baseURI + 'books/orderitem/?search=' + this.value)
          console.log('res1:', res1)
          this.goodsItems = res1.data
        } else {
          this.goodsItems = res.data
        }
      },
      getOdToPri(info) {
        const list = this.order.filter(value => {
          return value.order_nu === info
        })
        return list[0].total_price
      },
      getOdSTA(info) {
        const list = this.order.filter(value => {
          return value.order_nu === info
        })
        return list[0].order_status
      },
      getOdItem(info) {
        return this.orderItem.filter(value => {
          return value.order_nu === info
        })
      },
      getOdGdsInfo(orderNum) {
        const list = this.orderItem.filter(value => {
          return value.order_nu === orderNum
        })
        return this.goodsInfo.filter(value => {
          return value.goods_id === list[0].goods_id
        })
      },
      // 再次购买
      buyAgain(orderNu) {
        const byAgGdID = this.getOdGdsInfo(orderNu)
        const list = []
        const list1 = {
          count: 1,
          goodsID: byAgGdID[0].goods_id
        }
        list.push(list1)
        this.SET_GOODS_ITEM(list)
        console.log('byaggdid:', byAgGdID)
        this.$router.push({
          name: 'OrderConfirm'
        })
      },
      // 删除订单
      remove(pk) {
        const params = {
          is_deleted: '1'
        }
        this.$dialog.confirm({
          title: '您确定要删除该订单？',
          message: '您可在"我的订单"-"回收站"中查看'
        }).then(() => {
          axios.put(axios.defaults.baseURI + "books/mallorder/" + pk + '/', params).then(res => {
            console.log('res:', res)
            this.$toast('删除成功')
          })
        }).catch(() => {

        })
      },
      onSearch(val) {
        // trim() 删除搜索词前后的空格
        const word = val.trim()
        if (word !== '') {
          const storage = window.localStorage
          // indexOf() 判断历史搜索是否包含该搜索词，如果包含，返回索引值，否则返回-1
          if (this.historySearch.indexOf(word) !== -1) {
            this.historySearch.splice(this.historySearch.indexOf(word), 1)
            this.historySearch.unshift(word)
          } else {
            this.historySearch.unshift(word)
          }
          if (this.historySearch.length > 5) {
            // pop() 从数组中删除最后项,并返回该删除项
            this.historySearch.pop()
          }
          storage.setItem('OrderSearchWord', JSON.stringify(this.historySearch))
          this.value = word
          this.getSearchList()
        } else {
          this.$dialog.alert({
            message: '请输入搜索内容'
          }).then(() => {

          })
        }
      },
      onCancel() {
        this.$router.go(-1)
      }
    },
    created() {
      const storage = window.localStorage
      this.historySearch = JSON.parse(storage.getItem('OrderSearchWord'))
      this.value = this.$route.query.OrderSearchWord
      this.getSearchList()
    },
    computed: {
      ...mapState(['orderItem', 'goodsInfo', 'order'])
    }
  }
</script>

<style scoped>
  .my-order {
    width: 100%;
    height: 100%;
    background-color: #F2F2F2;
  }

  .my-order-tab {
    text-align: center;
    padding-top: 160px;
  }

  .order-box {
    margin: 15px 10px;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 2px 8px 0 rgb(0 0 0 / 5%);
    background-color: white;
  }

  .my-order-tab-second .order-box-header {
    display: flex;
    justify-content: flex-end;
  }

  .my-order-tab-second .order-box-header-state {
    margin-right: 10px;
    font-size: 14px;
    color: #999999;
  }

  .my-order-tab-second .order-box-header img {
    width: 15px;
    height: 15px;
  }

  .order-box-item {
    display: block;
  }

  .order-box-item .order-content {
    margin-top: 8px;
    display: flex;
    overflow: hidden;
  }

  .order-cover img {
    width: 75px;
    height: 75px;
  }

  .content {
    color: #333333;
    align-self: center;
    flex: 1;
  }

  .order-num {
    margin-left: 8px;
    color: #999999;
    align-self: center;
  }

  .order-total-bar {
    margin-top: 5px;
    position: relative;
    display: flex;
    justify-content: flex-end;
  }

  .order-payment {
    font-size: 14px;
    color: #333333;
    line-height: 21px;
  }

  .price {
    font-size: 16px;
    color: #151515;
    /* 行内元素垂直方向的对齐 */
    /* vertical-align: bottom; */
  }

  .order-button {
    padding-top: 10px;
    font-size: 14px;
    color: #333333;
    display: flex;
    justify-content: flex-end;
  }

  .od-btn-white {
    background-color: #FFFFFF;
    color: #333333;
    border: 1px solid #ccc;
    box-shadow: 0 3px 6px 0 rgb(0 0 0 / 5%);
  }

  .od-btn {
    text-align: center;
    width: 86px;
    height: 28px;
    line-height: 28px;
    border-radius: 15px;
    margin-left: 8px;
    flex-shrink: 0;
  }

  .od-btn-red {
    background-color: #fff;
    color: #f2270c;
    border: 1px solid #f2270c;
    box-shadow: 0 3px 6px 0 rgb(242 39 12 / 10%);
  }
</style>
